<template>
    <Form ref="form" :model="model" :rules="rules" @validate="errors=$event" :messages="messages">
        <div class="e-form-input">
            <Label for="name" align="left">名称:</Label>
            <TextBox inputId="name" name="name" v-model="model.name" style="width: 300px"
                     v-Tooltip="getTipOpts('name')"></TextBox>
        </div>
        <div class="e-form-input">
            <Label for="remark" align="left">描述:</Label>
            <TextBox inputId="remark" name="remark" v-model="model.remark" :multiline="true"
                     style="width: 300px;height:60px;padding: 5px"
                     v-Tooltip="getTipOpts('remark')"></TextBox>
        </div>
        <div class="e-form-input">
            <Label for="file" align="left">上传模板:</Label>
            <FileButton style="width:100px" @select="onFileSelect($event)">选择文件</FileButton>
            <span> {{filename}}</span>
        </div>
        <div class="e-form-input">
            <Label for="outputTemplate" align="left">导出名称:</Label>
            <TextBox inputId="outputTemplate" name="outputTemplate" v-model="model.outputTemplate" style="width: 300px"
                     v-Tooltip="getTipOpts('outputTemplate')"></TextBox>
        </div>
        <div class="e-form-input">
            <Label for="sort" align="left">排序:</Label>
            <TextBox inputId="sort" name="sort" v-model="model.sort" style="width: 300px"
                     v-Tooltip="getTipOpts('sort')"></TextBox>
        </div>
        <div style="margin: 10px;text-align: right;">
            <LinkButton @click="submitForm()" iconCls="icon-save">保存</LinkButton>
        </div>
    </Form>
</template>

<script>
    import {mixinForm} from "@/common/form.mixin";

    export default {
        name: "eForm",
        mixins: [mixinForm],
        props: {},
        data() {
            return {
                file: null,
                filename: "",
                rules: {
                    name: ["required", "length[2,128]"],
                    remark: ["required", "length[2,255]"],
                    sort: ["required"],
                    outputTemplate: ["required"],
                },
                messages: {
                    name: {
                        required: "名称必填"
                    },
                    remark: {
                        required: "描述必填"
                    },
                    sort: {
                        required: "排序必填"
                    },
                    outputTemplate: {
                        required: "导出模板名称必填"
                    }
                }
            };
        },
        methods: {
            add(request) {

                let formdata = new FormData()
                let model = request.object
                formdata.append('file', this.file)
                formdata.append('name', model['name'])
                formdata.append('remark', model['remark'])
                formdata.append('sort', model['sort'])
                formdata.append('outputTemplate', model['outputTemplate'])
                formdata.append("service", "cosUpload")
                this.$e.api.reportTemplateAdd(formdata).then(res => {
                    let [, code, message] = res
                    if (code === 200) {
                        this.$emit('addEnd')
                    } else {
                        this.$toast.center(message)
                    }
                })
            },
            update(request) {
                let formdata = new FormData()
                let model = request.object
                formdata.append('file', this.file)
                formdata.append('id', model['id'])
                formdata.append('name', model['name'])
                formdata.append('remark', model['remark'])
                formdata.append('sort', model['sort'])
                formdata.append('outputTemplate', model['outputTemplate'])
                formdata.append("service", "cosUpload")
                this.$e.api.reportTemplateUpdate(formdata).then(res => {
                    let [, code, message] = res
                    if (code === 200) {
                        this.$emit('addEnd')
                    }
                })
            },
            onFileSelect(e) {
                // 利用fileReader对象获取file
                this.file = e[0];
                this.filename = e[0].name;
            }
        }
    };
</script>

<style scoped>

</style>